<template>
  <el-drawer :title="id?'修改用户':'添加用户'" :before-close="cancel" :visible.sync="value" direction="rtl">
    <div class="demo-drawer__content">
      <el-form :model="drawerForm" :rules="rules" ref="drawerForm" label-width="80px">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="drawerForm.username" size="small" placeholder="用户名称"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password" v-if="!id">
          <el-input v-model="drawerForm.password" size="small" placeholder="请输入用户密码,不填默认【123456】"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="name">
          <el-input v-model="drawerForm.name" size="small" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="drawerForm.phone" size="small" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="drawerForm.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" size="small">
          <el-radio-group v-model="drawerForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述" prop="descript">
          <el-input
            type="textarea"
            v-model="drawerForm.descript"
            size="small"
            placeholder="请输入用户描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="上级部门" prop="deptId">
          <Treeselect
            v-model="drawerForm.deptId"
            placeholder="请选则上级部门"
            :options="departments"
            :normalizer="normalizer"
          ></Treeselect>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancel" size="small">取 消</el-button>
        <el-button
          type="primary"
          @click="submit"
          size="small"
          :loading="loading"
        >{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { save, update, getById } from "@/api/user";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
export default {
  name: "userAddAndUpddate",
  components: { Treeselect },
  props: {
    value: Boolean,
    departments: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      id: null,
      defaultPassword: "123456",
      loading: false,
      drawerForm: {
        descript: "",
        email: "",
        gender: 0,
        name: "",
        password: "",
        phone: "",
        status: 1,
        username: "",
        deptId: null
      },
      rules: {
        username: [
          { required: true, message: "用户名称不能为空", trigger: "blur" }
        ],
        name: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
        phone: [
          { required: true, message: "昵称不能为空", trigger: "blur" },
          {
            require: true,
            trigger: "blur",
            validator: (rule, value, callback) => {
              const regx = /^1\d{10}$/;
              if (value) {
                if (!regx.test(value)) {
                  callback(new Error("手机号不正确，请重新输入"));
                }
              }
              callback();
            }
          }
        ],
        password: [
          {
            require: true,
            min: 6,
            max: 10,
            message: "用户密码长度6~10个字符",
            trigger: "blur"
          },
          {
            require: true,
            trigger: "blur",
            validator: (rule, value, callback) => {
              const regx = /[\w@]{6,10}/;
              if (value) {
                if (!regx.test(value)) {
                  callback(
                    new Error(
                      "用户密码不符合规格【大小写字母|数字|下划线组成】"
                    )
                  );
                }
              }
              callback();
            }
          }
        ],
        descript: [
          { required: true, message: "用户描述不能为空", trigger: "blur" }
        ],
        deptId: [
          {
            require: true,
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (value === null) {
                callback(new Error("部门不能为空"));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    async init(id) {
      this.id = id;
      if (this.id) {
        const { data } = await getById(id);
        this.drawerForm.descript = data.descript;
        this.drawerForm.email = data.email;
        this.drawerForm.gender = data.gender;
        this.drawerForm.name = data.name;
        this.drawerForm.password = data.password;
        this.drawerForm.phone = data.phone;
        this.drawerForm.status = data.status;
        this.drawerForm.username = data.username;
        this.drawerForm.deptId = data.deptId;
      }
    },
    submit() {
      this.$refs["drawerForm"].validate(async isOk => {
        if (isOk) {
          if (this.id) {
            this.drawerForm.id = this.id;
            await update(this.drawerForm);
          } else {
            if (this.drawerForm.password === "") {
              this.drawerForm.password = this.defaultPassword;
            }
            await save(this.drawerForm);
          }
          // 重新刷新数据
          this.$emit("refresh");
        }
      });
    },
    cancel() {
      this.$refs["drawerForm"].resetFields();
      this.$emit("input", false);
    },
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        //将name转换成必填的label键
        label: node.dname,
        children: node.children
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.demo-drawer__footer {
  text-align: center;
}
</style>